<template>
  <div class="asset">
    <PageHeader :lang="lang"></PageHeader>
    <section class="container" id="pageBody">
      <div class="menu">
        <div class="header">
          <div class="title">
            <i></i>
            <h3 v-text="lang && lang['Digital asset list']"></h3>
          </div>
          <div class="search">
            <input type="text" v-model="value" @keyup.13="fetch($event)">
            <i @click="search()"></i>
          </div>
        </div>
        <div class="body">
          <ul class="list" id="list">
            <li class="item" v-bind:class="{'active': item.Keywords === Keywords}" v-for="(item, index) in data" :key="index" v-text="item.Name" @click="checkContent(item.Keywords)"></li>
          </ul>
        </div>
      </div>
      <div class="content">
        <div class="header" v-if="data.length > 0">
          <h3 class="title" v-text="name"></h3>
          <router-link :to="{path:'/trading'}" class="btn" v-text="lang && lang['Go to trade']"></router-link>
        </div>
        <div class="no-data" v-if="data.length === 0" v-text="lang && lang ['No query data']"></div>
        <div class="text" v-else v-html="text"></div>
      </div>
    </section>
    <PageFooter2 :lang="lang" :langKey="langKey"></PageFooter2>

    <!-- 提示弹窗 -->
    <SwModal :isShow.sync="isEmpty" :isShowBg="true" :onClosed="onClosed" modalClass="helptips">
      <div class="tipPop">
        <div class="title">
          <span v-text="lang && lang['point out']"></span>
          <img src="./images/close.png" alt="close-btn" class="close" @click="isEmpty=false">
        </div>
        <div class="text" v-text="lang.helpInputKeyword"></div>
        <span class="btn" v-text="lang.iGotIt" @click="isEmpty=false"></span>
      </div>
    </SwModal>
  </div>
</template>

<script>
import Utils from '@/utils/Utils.js'
import commonMixins from '@/mixins/common.js'
import SwModal from '@/components/SwModal'
export default {
  mixins: [commonMixins],
  data () {
    return {
      isEmpty: false,
      Keywords: '',
      name: '',
      text: '',
      value: '',
      data: [],
      scroll: null
    }
  },
  components: {
    SwModal
  },
  watch: {
    langKey () {
      this.fetch()
    },
    value (a, b) {
      this.fetch()
    }
  },
  methods: {
    search () {
      let self = this
      if (self.value.replace(/(^\s*)|(\s*$)/g, '') === '') {
        self.isEmpty = true
        return
      }
      self.fetch()
    },
    fetch () {
      let self = this
      this.$http.post('DigitalAssets/GetSearchList', {
        keywords: self.value.replace(/(^\s*)|(\s*$)/g, ''),
        LanguageType: self.langKey
      }).then((res) => {
        self.name = ''
        self.text = ''
        self.data = res.Data
        if (self.value !== '') {
          self.Keywords = ''
        }

        if (self.Keywords !== '') {
          self.checkContent(self.Keywords)
        } else {
          if (self.data.length > 0) {
            self.Keywords = self.data[0].Keywords || ''
            self.name = self.data[0].Name || ''
            self.text = self.data[0].Context || ''
          }
        }
        self.scroll.resize()
      })
    },
    checkContent (Keywords) {
      let self = this
      self.data.find(x => {
        if (x.Keywords === Keywords) {
          self.Keywords = x.Keywords
          self.name = x.Name
          self.text = x.Context
          Utils.LS.set('DCID', self.Keywords)
        }
      })
      self.scroll.resize()
    },
    onClosed () {

    }
  },
  mounted () {
    this.Keywords = Utils.LS.get('DCID') || ''
    this.fetch()
    this.scroll = $('#list').niceScroll({autohidemode: true, scrollspeed: 0})
  },
  beforeDestroy () {
    Utils.LS.remove('DCID')
  }
}
</script>

<style scoped lang="less">
  .container {
    width: 1200px;
    margin: 0 auto;
    color: #ddd;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .menu {
      width: 220px;
      box-sizing: border-box;
      margin: 40px 0;
      position: relative;

      .header {
        background-color: #314363;
        text-align: center;

        .title {
          padding: 18px 0;
          box-sizing: border-box;
          background-color: #3782FF;
          text-align: left;
          padding-left: 25px;
          display: flex;

          i {
            background: url('./images/list.png') no-repeat center;
            width: 18px;
          }

          h3 {
            font-size: 16px;
            color: white;
            padding-left: 6px;
          }
        }

        .search {
          padding: 12px 0;
          box-sizing: border-box;
          position: relative;

          input {
            width: 74%;
            display: inline-block;
            background-color: transparent;
            padding: 4px 30px 4px 8px;
            box-sizing: border-box;
            border: 1px solid #7991B7;
            border-radius: 4px;
            color: #eee;
          }

          i {
            display: inline-block;
            background: url('./images/search.png') no-repeat center;
            background-size: cover;
            width: 14px;
            height: 14px;
            vertical-align: middle;
            position: absolute;
            right: 16%;
            top: 19px;
            cursor: pointer;
          }
        }
      }

      .body {
        position: absolute;
        left: 0;
        right: 0;
        .list {
          max-height: 562px;
          overflow-x: hidden;
          overflow-y: auto;
          background-color: #202832;

          .item {
            padding: 18px 30px;
            box-sizing: border-box;
            background-color: #202832;
            border-bottom: 1px solid #000;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            cursor: pointer;
          }

          .active {
            background-color: #152132;
          }

          .item:hover {
            .active;
          }
        }
      }
    }

    .content {
      flex: 1;
      min-height: 630px;
      float: right;
      margin: 40px 0 40px 40px;
      box-sizing: border-box;
      background-color: #202832;
      position: relative;

      .header {
        background-color: #191E2A;
        padding: 18px;
        border-bottom: 2px solid #000;
        position: relative;

        h3 {
          display: inline-block;
        }

        .btn {
          position: absolute;
          right: 20px;
          top: 50%;
          transform: translateY(-50%);
          background-color: #3782FF;
          border-radius: 2px;
          text-align: center;
          padding: 6px 10px;
          box-sizing: border-box;
          color: white;
        }
      }

      .text {
        padding: 20px;
        line-height: 22px;
      }
      .no-data {
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  .helptips {
    .tipPop {
      width: 480px;
      height: 180px;
      text-align: center;
      color: #fff;
      position: relative;
      height: 180px;

      .title {
        padding: 14px 0;
        position: relative;

        .btn {
          position: absolute;
          bottom: 20px;
          left: 50%;
          transform: translateX(-50%);
        }
      }
      .text {
        padding-bottom: 40px;
      }
      .btn {
        cursor: pointer;
      }
    }
  }

  @media screen and (max-width:1200px){
    .container {
      width: auto;
      padding: 0 10px;
      box-sizing: border-box;

      .content {
        margin-left: 16px;
      }
    }
  }
</style>
